<template>
  <div class="split-containers">
    <!-- <split-pane :default-percent="28" :min-percent="28" split="vertical">
      <div slot="paneL" class="pane"/>
      <div slot="paneR" class="pane">

      </div>
    </split-pane> -->
    <el-container style="height: 100%">
      <el-aside width="350px" >
        <div class="left-container">
          <div class="tabs">
            <!-- <x-from id="tabsForm" :form-data="tabsItem" :inline="true" /> -->
            <el-radio-group v-model="tabsVal" >
              <el-radio-button v-for="(item,index) in tabData" :label="item.value" :key="index"><div >{{ item.label }}</div></el-radio-button>
            </el-radio-group>
          </div>
          <div v-show="tabsVal == 0" class="view-box">
            <x-from id="leftForm" :form-data="left.arr" :form-value="left.value" :inline="true" :draggable="{group:{ name:'people', pull:'clone',put:false},sort:false}" />
          </div>
          <div v-show="tabsVal == 1" class="view-box">
            <x-config ref="config" />
          </div>
          <div v-show="tabsVal == 2" class="view-box">
            <x-form-config />
          </div>
        </div>
      </el-aside>
      <el-container>
        <x-from id="rightForm" ref="from" :form-data="right" :draggable="{group:{ name:'people'},animation:100}" :form-config="{labelPosition: 'top'}" @setting="settingEle" />
      </el-container>
    </el-container>
  </div>
</template>
<script>
import splitPane from 'vue-splitpane'
import draggable from 'vuedraggable'
import xFrom from './formBox'
import xConfig from './setting.vue'
import xFormConfig from './formSetting.vue'
import leftList from './left'
import vFormItem from './formItem'
// import formItemData from './formItem.js'
export default {
  components: { splitPane, draggable, xFrom, xConfig, vFormItem, xFormConfig },
  props: {

  },
  data() {
    return {
      left: {},
      right: [{
        arr: [],
        value: []
      }],
      hoverLeft: [],
      hoverRight: [],
      activeName: 'second',
      tabsVal: 0,
      tabData: [{
        value: 0,
        label: '组件列表'
      }, {
        value: 1,
        label: '组件属性'
      }, {
        value: 2,
        label: '表单属性'
      }],
      formConfig: {

      }
      // tabsItem: [{
      //   label: 'radio',
      //   category: 'radio',
      //   option: [{
      //     value: 0,
      //     label: '组件列表'
      //   }, {
      //     value: 1,
      //     label: '组件属性'
      //   }, {
      //     value: 2,
      //     label: '表单属性'
      //   }],
      //   value: 0,
      //   radioButton: true,
      //   name: 'tabsRadio'
      // }]
    }
  },
  computed: {

  },
  watch: {

  },
  created() {
    this.left = this.initComponentData(leftList)
    console.log(this.left)
  },
  methods: {
    settingEle(e) {
      this.tabsVal = 1
      this.$refs.config.setData(e)
    }
    /* setConfig(e) {
      this.$refs.from.setConfig(e)
    },
    setFormConfig(e) {
      this.$refs.from.setFormConfig(e)
    } */
  }
}
</script>
<style lang="scss" >
 .butStyle .el-form-item__content{
    /* width: 150px; */
    /* margin: 0 auto; */
    display: block;
    & [type="button"]{
      width: 96%;
      margin: 0 auto;
    }
  }
  </style>
<style lang="scss" scoped>
  .split-containers {
    position: relative;
    height: 100vh;
  }

  .left-container,
  .right-container {
    height: 100vh;
    padding: 10px;
  }
  .tabs{
    margin: 15px auto  30px;
    width: 292px;
    display: block;
  }
  .pane,.view-box{
    width: 100%;
    height: 100%;
  }
</style>
